<script>
import moment from "moment";

export default {
  name: "brandPage",
  data() { //data写成函数的作用：实现数据隔离，互不影响
    return {
      carList: [
        {
          id:'1',
          name: '奔驰',
          Ctime: new Date()
        }, {
          id: '2',
          name: '宝马',
          Ctime: new Date()
        }
      ],
      carId:'',
      carName:'',
      keyWord:'',
      delIndex:'',
      oldName:'',
      newName:'',
      modifyIndex:''
    }
  },
  methods: {
    // 添加
    add(){
      // console.log('添加')
      // console.log(this.carId)
      // console.log(this.carName)
      // console.log(this.carList.find(item=>item.id===this.carId))
      // console.log(this.carList.some(item=>item.id===this.carId))
      // if(this.carList.find(item=>item.id===this.carId)){
      if(this.carList.some(item=>item.id===this.carId)){
        alert('id重复')
      }else {
        this.carList.push({
          id: this.carId,
          name:this.carName,
          Ctime: new Date()
        })
        // localStorage.setItem('carList',JSON.stringify(this.carList))
        this.getLocal()
      }
      /*this.carList.some(item=>item.id===this.carId)? alert('id重复'):this.carList.push({
        id: this.carId,
        name:this.carName,
        Ctime: new Date()
      })*/
      this.carId='';
      this.carName='';
      // console.log(this.carList)
    },
    // 删除
    // del(i) {
    del(item) {
      // this.carList.pop({})
      //   splice(index,length) 会改变原数组
      //   console.log(i)
      //   console.log(this.carList.splice(i,1))
      //   console.log(this.carList)
      //   this.carList.splice(i,1)
      //   获取删除元素的索引
      console.log(this.carList.indexOf(item))
      // this.carList.splice(this.carList.indexOf(item),1)
      this.delIndex=this.carList.indexOf(item)
    },
    // 搜索
    search(){
      // console.log(this.keyWord)
      // console.log(this.carList.filter(item=>item.name.includes(this.keyWord)))
      // this.carList=this.carList.filter(item=>item.name.includes(this.keyWord))
      // console.log(this.carList)
      return this.carList.filter(item=>item.name.includes(this.keyWord))
    },
    //   确定删除
    confirmDel(){
      // this.carList.splice(this.carList.indexOf(item),1)
      this.carList.splice(this.delIndex,1)
      // localStorage.setItem('carList',JSON.stringify(this.carList))
      this.getLocal()

    },
    //   修改
    modify(item){
      // console.log(item.name)
      this.oldName=item.name;
      this.modifyIndex=this.carList.indexOf(item)
      // console.log(this.modifyIndex)
    },
    //   确认修改
    confirmModify(){
      console.log(this.newName)
      this.carList[this.modifyIndex].name=this.newName
      this.newName=''
      this.getLocal()
    },
    //   封装缓存
    getLocal(){
      localStorage.setItem('carList',JSON.stringify(this.carList))
    }
  },
  filters:{
    filterTime(data,format) {
      // console.log(data,format)
      // let Y=data.getFullYear().toString().padStart(2,0)
      // let M=(data.getMonth()+1).toString().padStart(2,0);
      // let D=data.getDate().toString().padStart(2,0);
      // console.log(data.getDay().toString().padStart(2,0))
      /*if(M<10) {
        M='0'+M
      }*/
      // padStart
      // let str='5';
      // console.log(str.padStart(4,'a'))
      // console.log(Y,M,D)
      // console.log(format.replace('YYYY',Y).replace('MM',M).replace('DD',D))
      // return `${Y}/${M}/${D}`
      // console.log(moment(data).format(format),'moment')
      // return format.replace('YYYY',Y).replace('MM',M).replace('DD',D)
      // day.js
      return moment(data).format(format)
    }
  },
  created(){
    // console.log(localStorage.getItem('carList'))
    this.carList=JSON.parse(localStorage.getItem('carList')) || []
  }
}
</script>
<template>
  <div>
    品牌管理
    <div class="card container">
      <div class="card-header">添加品牌</div>
      <div class="card-body">
        <form class="form-inline" action="">
          <label for="email" class="mr-sm-2">ID:</label>
          <input type="text" class="form-control mb-2 mr-sm-2" v-model="carId">
          <label for="pwd" class="mr-sm-2">Name:</label>
          <input type="text" class="form-control mb-2 mr-sm-2" v-model="carName">
          <button type="button" class="btn btn-primary mb-2" @click="add">添加</button>
          <label for="pwd" class="mr-sm-2">搜索关键字:</label>
          <!--          <input type="text" class="form-control mb-2 mr-sm-2" @input="search" v-model="keyWord">-->
          <input type="text" class="form-control mb-2 mr-sm-2" @change="search" v-model="keyWord">
        </form>
      </div>
      <div class="card-footer">
        <table class="table table-striped">
          <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>operation</th>
          </tr>
          </thead>
          <tbody>
          <!--          <tr v-for="(item,index) in carList" :key="item.id">-->
          <!--          <tr v-for="(item,index) in search()" :key="item.id">-->
          <tr v-for="(item) in search()" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.Ctime | filterTime('YYYY-MM-DD hh:mm:ss')}}</td>
            <td>
              <!--              <button type="button" class="btn btn-danger" @click="del(index)">删除</button>-->
              <button type="button" class="btn btn-danger" @click="del(item)" data-toggle="modal" data-target="#delModal">删除</button>
              <button type="button" class="btn btn-danger" @click="modify(item)" data-toggle="modal" data-target="#modifyModal">修改</button>
            </td>
          </tr>
          <!--          <tr>
                      <td>1</td>
                      <td>奔驰</td>
                      <td>2024</td>
                      <td>
                        <button type="button" class="btn btn-danger">删除</button>
                      </td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>宝马</td>
                      <td>时间</td>
                      <td>
                        <button type="button" class="btn btn-danger">删除</button>
                      </td>
                    </tr>-->
          </tbody>
        </table>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="delModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <!--            <h4 class="modal-title">模态框头部</h4>-->
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            <!--            模态框内容..-->
            确认删除吗？
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirmDel">确认删除</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>

        </div>
      </div>
    </div>
    <div class="modal fade" id="modifyModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            <!--            模态框内容..-->
            <p>原来的名字：{{oldName}}</p>
            <p>新名字：<input type="text" v-model="newName"></p>
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirmModify">确认修改</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>